<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ofa.js Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/ofa.js/dist/ofa.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button on:click="changeMessage">Change Message</button>
  </div>

  <script>
    // 确保 DOM 加载完成后再初始化 ofa.js
    document.addEventListener('DOMContentLoaded', function () {
      const app = $('#app').ofa({
        data: {
          message: 'Hello, ofa.js!'
        },
        methods: {
          changeMessage() {
            this.message = 'You clicked the button!';
          }
        }
      });
    });
  </script>
</body>

</html>